<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* css 代码  */
    </style>
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px"></div>
<th:block th:include="include :: footer" />
<script>
    var studentInfo =[
        ['上海', 24.25],
        ['卡拉奇', 23.50],
        ['北京', 21.51],
        ['德里', 16.78],
        ['拉各斯', 16.06],
        ['天津', 15.20],
        ['伊斯坦布尔', 14.16],
        ['东京', 13.51],
        ['广州', 13.08],
        ['孟买', 12.44],
        ['莫斯科', 12.19],
        ['圣保罗', 12.03],
        ['深圳', 10.46],
        ['雅加达', 10.07],
        ['拉合尔', 10.05],
        ['首尔', 9.99],
        ['武汉', 9.78],
        ['金沙萨', 9.73],
        ['开罗', 9.27],
        ['墨西哥', 8.87]
    ];

      function showCharts(){
             Highcharts.chart('container', {
              chart: {
                  type: 'column'
              },
              title: {
                  text: '初三一班学生分数统计'
              },
              subtitle: {
                  text: '数据截止 2022-12-05</a>'
              },
              xAxis: {
                  type: 'category',
                  labels: {
                      rotation: -45  // 设置轴标签旋转角度
                  }
              },
              yAxis: {
                  min: 0,
                  title: {
                      text: '分数统计'
                  }
              },
              legend: {
                  enabled: false
              },
              tooltip: {
                  pointFormat: '分数</b>'
              },
              series: [{
                  name: '',
                  data: studentInfo,
                  dataLabels: {
                      enabled: true,
                      rotation: -90,
                      color: '#FFFFFF',
                      align: 'right',
                      format: '{point.y:.1f}', // :.1f 为保留 1 位小数
                      y: 10
                  }
              }]
          });
      }

    $(function() {
        var config = {
            url: url,
            type: type,
            dataType: 'JSON',
            data: data,
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍候...");
            },
            success: function(result) {
                if (typeof callback == "function") {
                    callback(result);
                }
                $.operate.ajaxSuccess(result);
            }
        };
        $.ajax(config)


        showCharts();
    });

</script>
</body>
</html>